<!-- 
    新建资产配置

    此页面有多个场景：
        1-资产配置列表页 - 新建资产配置按钮 type=add
        2-资产配置列表页 - 编辑 type=edit
        3-客户详情页 - 资产配置按钮点击进入，此时type=cus，此时url上还有参数 customerSort和customerId
        4-从新建跟踪客户页面回来，app会回到新建资产配置页面，此时type=cus，此时url上还有参数 customerSort和customerId

    所有表单容器 都加上 formSection class
-->
<template>
    <div class="addAsset">
        <div class="formSection">

            <!-- 客户 -->
            <slot-form-customer :slotFormSet="slotFormCustomerSet"></slot-form-customer>

            <!-- 年龄 -->
            <slot-form-age :slotFormSet="slotFormAgeSet"></slot-form-age>
          
            <!-- 风险偏好 -->
            <slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>

        </div>

        <div class="discription">为了更加明确客户画像，输出匹配的配置方案，下一步需填写客户画像11个问题</div>  


        <!-- 按钮默认灰色 -->
        <mt-button class="bottom" size="large" ref="nextButton" :disabled="disabled" @click="submitForm()">下一步</mt-button>

    </div>
</template>


<script>

import slotFormCustomer from '@src/common/components/form/slot/customer'
import slotFormAge from '@src/common/components/form/slot/age'
import slotFormSelect from '@src/common/components/form/slot/select'

export default {
    name: "addAsset",
    data() {
        return {

            type: this.$route.query.type,

            slotFormCustomerSet: {
                params: {
                    label: '客户',
                    // addBtn: true,
                    showIcon: false,
                    //客户弹层搜索列表的请求接口路径
                    httpUrl : apiUrl.searchCustomerListApi,
                    searchListType: 'zcpzCus',
                    type: this.$route.query.type //url上从列表页带过来的，区分编辑还是新建
                },
                beforeData: null
            },

            //年龄表单配置项
            slotFormAgeSet: {
                params: {
                    label: '客户的年龄是',
                    unit: '岁',
                    maxLength: 3,
                    oninput: true,
                    name: 'age'
                },
                beforeData: null
            },

            //风险偏好配置项
            slotFormRiskSet: {
                params: {
                    label: '客户的风险偏好为',
                    name: 'riskType'
                },
                selectList: [],
                beforeData: null
            },

            //接口请求回来的字典值保存
            descArr: {  
                riskTypeDic: null
            },

            //跟表单数据对应的字典文案
            formDesc: {
                riskTypeText: null,  //风险承受能力
            },

            //各项表单没填时的校验提示文字
            validFormElements:{
                "customerName":"请选择客户",
                "age": "请输入客户的年龄",
                "riskType":"请选择客户的风险偏好",
            },

            //存储表单数据，用于提交接口
            formData:{
                customerNo:null,   //客户编号
                customerSource:null,  //客户来源
                customerName:null, //客户姓名
                age:  null,//年龄
                riskType: null,  //风险承受能力 
                id: this.$route.query.id ?  this.$route.query.id  : '', //为空时新增，否则为修改
            },

            //控制下一步按钮可点状态
            disabled: true,

            //必填的表单的状态，用于修改 disabled 值
            formBtn: {
                customerNameGet: false,
                ageGet: false,
                riskTypeGet: false
            },
        };
    },

    components:{
        slotFormCustomer,
        slotFormAge,
        slotFormSelect
    },
    created: function() {

        var that = this;

        //请求字典值
        this.getDic();

    },

    watch:{

        //监听formBtn的变化，如果有变动，修改按钮状态
        formBtn: {
            handler(newVal, oldVal){

                if( newVal.customerNameGet && newVal.ageGet && newVal.riskTypeGet){
                    //都为true时，修改按钮的状态为可点
                    this.disabled = false
                }
                else{
                    //否则不可点
                    this.disabled = true
                }
                
            },
            deep: true
        },
    },

    methods: {

        //客户表单的值变了
        changeCustomerVal( newVal, oldVal, item ){

            console.log( '收到的值', newVal)

            item = item || this.formData

            //设置到formData上
            if( !!newVal ){
                // this.formData.customerNo = item.custNo ;
                // this.formData.customerSource = item.customerSource ;

                this.formBtn.customerNameGet = true

                //请求回显的年龄和风险承受能力数据
                // this.getCustomerAssetDetailByCustomerApi(item)
            }
            else{
                // this.formData.customerNo = null ;
                // this.formData.customerSource = null ;
                this.formBtn.customerNameGet = false
            }
            
        },

        //input表单的值变了
        changeInputVal( name, newVal,oldVal ){

            console.log( '收到的值', newVal)

            if( name == 'age'){
                this.formData.age = newVal;

                if( !!newVal ){
                    this.formBtn.ageGet = true
                }
                else{
                    this.formBtn.ageGet = false
                }
            }
        },

        //select表单的值变了
        changeSelectVal( name, newVal,oldVal){
            console.log( '收到的值', newVal)
            
            if( name == 'riskType'){

                //因为是字典值对应的文案，不能直接设置到formData上
                //先设置到 formDesc上，提交时再根据字典值转换
                this.formDesc.riskTypeText = newVal

                if( !!newVal ){
                    this.formBtn.riskTypeGet = true
                }
                else{
                    this.formBtn.riskTypeGet = false
                }
            }

        },


        //下一步点击事件
        submitForm(){
            
            var that = this;

            console.log(this.descArr.riskTypeDic)

            //在字典值接口里找对应的 风险承受能力的值
            this.descArr.riskTypeDic.forEach((el, i, arr) => {
                console.log(el.keyValue, this.formDesc.riskTypeText, el.keyNo)
                if( el.keyValue == this.formDesc.riskTypeText ){
                    this.formData.riskType = el.keyNo
                }
            })

            for(var key in this.formData){ 
                if(this.formData[key] == "" && this.formData[key] !=0 ){
                    this.formData[key]=null
                }
            }

            //使用json.stringify转换对象会丢失值为空的或是null的
            //对象深拷贝使用objDeepCopy方法
            var $formData = this.$utils.objDeepCopy(this.formData);

            var $validFormElements = this.$utils.objDeepCopy(this.validFormElements);

            console.log($formData)
            
            //校验表单数据是否填写
            var formCusValid = this.$utils.newFormElValid($formData, $validFormElements);

            if(!formCusValid){
                this.formValid = false;
                return;
            }

            //校验通过
            that.$axiosHttp.http({
                name:'新建资产第一步保存',
                url: apiUrl.saveCustomerAssetFirstStepApi,
                needFailCallback: true,
                params: $formData
            }, (res) => {

                //接口成功
                this.$parent.changeToSteps(2)

            })
        },

        //获取字典
        getDic(){
            this.$axiosHttp.http({
                name:'获取字典',
                url: apiUrl.getCustomerAssetDictionaryApi,
                data:["1002"], 
            }, (res) => {
               /* 1000是与否
                1001生命周期阶段
                1002客户风险承受能力
                1003资产分类
                1004资产类别
                1005项目类型
                1006细分策略
                1007家庭未来现金流稳定性*/

                this.descArr.riskTypeDic = res.data.data[1002];  //风险承受能力字典值

                //设置风险承受能力弹窗数据
                let newRiskArr = []
                this.descArr.riskTypeDic.map(item=>{
                    newRiskArr.push( item.keyValue )
                })
                this.slotFormRiskSet.selectList = [{
                    values: newRiskArr
                }]

                //请求其他接口
                if ( this.type == 'cus'){
                    //从客户详情页进来的，或者是从新建跟踪客户回来的
                    this.getUser();
                }
                else if( this.type == 'edit'){
                    //编辑时请求回显数据
                    this.getCustomerAssetDetailById();
                }

            }, res => { 
               
            })

        },


        //type==cus时，获取用户信息
        getUser(){
            this.$axiosHttp.http({
                name:'获取用户',
                url: apiUrl.getCustomerInfoByIdAndSortApi,
                params: {
                    customerSort: this.$route.query.customerSort,
                    customerId: this.$route.query.customerId
                }
            }, (res) => {
                
                var item = res.data.data;
                
                // 根据用户编号获取资产配置的id
                this.$axiosHttp.http({
                    name:'获取用户',
                    url: apiUrl.selectNewAssetConfigApi,
                    method: 'GET',
                    params: {
                        customerSource: item.customerSource, //客户来源
                        customerNo: item.customerId  //客户编号
                    },
                    needFailCallback:true
                }, (res) => {

                        var data = res.data.data;

                        //保存资产配置id
                        this.formData.id = data.id;

                        this.formData.customerNo = data.customerNo; //客户编号
                        this.formData.customerSource = data.customerSource; //客户来源
                        this.formData.customerName = data.customerName; //客户姓名
                        this.formData.riskType = data.riskType ? data.riskType : null;  //风险承受能力
                        this.formData.age = data.age ? data.age : null; //年龄

                        //获取风险承受能力对应的文案
                        var riskArr =  this.descArr.riskTypeDic.filter(function(el){
                            return el.keyNo == data.riskType
                        });
                        this.formDesc.riskTypeText = (riskArr.length ) ? riskArr[0].keyValue : null;


                        //设置回显数据
                        this.slotFormCustomerSet.beforeData = data.customerName
                        this.slotFormAgeSet =  Object.assign({}, this.slotFormAgeSet, { beforeData: this.formData.age} )

                        this.slotFormRiskSet =  Object.assign({}, this.slotFormRiskSet, { beforeData: this.formDesc.riskTypeText} )
                        // this.slotFormAgeSet.beforeData = data.age
                        // this.slotFormRiskSet.beforeData = this.formDesc.riskTypeText

                        if( data.customerName && data.age && this.formDesc.riskTypeText ){
                            this.slotFormCustomerSet.isDisabled = true
                        }

                }, null, (res)=>{
                    //如果没有数据
                    this.getCustomerAssetDetailByCustomerApi(item)  
                })
            }, res => {
               
            })

        },

        //编辑资产配置--回显
        getCustomerAssetDetailById(){

            this.$axiosHttp.http({
                name:'编辑资产配置时进入页面回显',
                url: apiUrl.getCustomerAssetDetailByIdApi,
                params: {
                    id: this.$route.query.id //资产配置id 
                }
            }, (res) => {
                var data = res.data.data;

                this.formData.customerNo = data.customerNo; //客户编号
                this.formData.customerSource = data.customerSource; //客户来源
                this.formData.customerName = data.customerName; //客户姓名
                this.formData.riskType = data.riskType ? data.riskType : null;  //风险承受能力
                this.formData.age = data.age ? data.age : null; //年龄

                //获取风险承受能力对应的文案
                var riskArr =  this.descArr.riskTypeDic.filter(function(el){
                    return el.keyNo == data.riskType
                });
                this.formDesc.riskTypeText = (riskArr.length ) ? riskArr[0].keyValue : null;

                //设置回显数据
                this.slotFormCustomerSet.beforeData = data.customerName
                this.slotFormAgeSet =  Object.assign({}, this.slotFormAgeSet, { beforeData: this.formData.age} )

                this.slotFormRiskSet =  Object.assign({}, this.slotFormRiskSet, { beforeData: this.formDesc.riskTypeText} )

                // this.slotFormAgeSet.beforeData = this.formData.age
                // this.slotFormRiskSet.beforeData = this.formDesc.riskTypeText

                if( data.customerName && data.age && this.formDesc.riskTypeText ){
                    this.slotFormCustomerSet.isDisabled = true
                }

            })
        },

        //重要-----
        //请求此客户的数据回显到页面上(年龄和风险偏好)
        //这个接口和 selectNewAssetConfigApi 接口不一样的是，没有返回 id
        getCustomerAssetDetailByCustomerApi( item ){
            
            this.$axiosHttp.http({
                name:'请求客户数据回显到页面上',
                url: apiUrl.getCustomerAssetDetailByCustomerApi,
                params: {
                    customerSource: item.customerSource, //客户来源
                    customerNo: item.customerId  //客户编号
                }
            }, (res) => {
                var data = res.data.data;

                console.log('请求此客户的数据')

                this.formData.customerNo = data.customerNo ? data.customerNo : null; //客户编号
                this.formData.customerSource = data.customerSource ? data.customerSource : null ; //客户来源
                this.formData.customerName = data.customerName ? data.customerName : null; //客户姓名
                this.formData.riskType = data.riskType ? data.riskType : null;  //风险承受能力
                this.formData.age = data.age ? data.age : null; //年龄

                //获取风险承受能力对应的文案
                var riskArr =  this.descArr.riskTypeDic.filter(function(el){
                    return el.keyNo == data.riskType
                });
                this.formDesc.riskTypeText = (riskArr.length ) ? riskArr[0].keyValue : null;


                console.log(this.formData)


                //设置给表单回显的数据
                
                // this.$set( this.slotFormAgeSet, 'beforeData', this.formData.age)

                this.slotFormCustomerSet.beforeData = this.formData.customerName
                
                this.slotFormAgeSet =  Object.assign({}, this.slotFormAgeSet, { beforeData: this.formData.age} )

                this.slotFormRiskSet =  Object.assign({}, this.slotFormRiskSet, { beforeData: this.formDesc.riskTypeText} )

                // this.slotFormRiskSet.beforeData = this.formDesc.riskTypeText

                if( this.formData.customerName && this.formData.age && this.formDesc.riskTypeText ){
                    this.slotFormCustomerSet.isDisabled = true
                }

                 // console.log( '新年龄', this.formData.age )

                 // console.log( '新风测', this.formDesc.riskTypeText )

            })
        },

    }
};
</script>